<template>
  <div>
    <el-card>
      <div slot="header"><span>新增文章</span></div>
      <el-form
        :model="newInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-col :span="6">
          <el-form-item label="作者" prop="author">
            <el-input v-model="newInfo.author"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="标题">
            <el-input v-model="newInfo.title"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="是否展示">
            <el-switch
              v-model="newInfo.isShow"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="newInfo.summary"></el-input>
          </el-form-item>
        </el-col>
        <!-- 上传头像 -->
        <el-col :span="24">
          <el-form-item label="上传头像">
            <!-- uploadUrl与uploadHeader在mixins里引入 -->
            <el-upload
              ref="uploadPic"
              class="upload-demo"
              :action="uploadUrl"
              :headers='uploadHeader'
              multiple
              :on-success="handleAvatarSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              
            </el-upload>
            <img style="height:150px" :src="newInfo.coverImg" alt="">
          </el-form-item>
        </el-col>

        <!-- 富文本与markdown多选框 -->
        <el-col :span="24">
          <el-radio-group v-model="newInfo.editorType">
            <el-radio :label="0">
              富文本
            </el-radio>
            <el-radio :label="1">
              markdown
            </el-radio>
          </el-radio-group> 
        </el-col>


        <!-- 富文本框引入 -->
        <el-col :span="24" v-if="newInfo.editorType==0"> 
          <!-- 富文本框上传图片 -->
          <el-upload
              ref="uploadTiny"
              class="uploadTinymce"
              :action="uploadUrl"
              :headers='uploadHeader'
              multiple
              :on-success="handleTinymceSuccess"
            >
              <el-button size="small" type="primary">插入富文本图片</el-button>
              
          </el-upload>
          <TEditor ref="Ti" />
        </el-col>
        <!-- markdown引入 -->
        <el-col :span="24" v-if="newInfo.editorType==1"> 
          <MDEditor ref="MD" />
        </el-col>

        <!-- 立即创建按钮 -->
        <el-col :span="24" :offset="0">
          <el-form-item>
            <el-button
              :loading = loading
              type="primary"
              size="mini"
              @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import TEditor from "@/components/Tinymce/index"
import MDEditor from "@/components/MarkdownEditor/index"
import articleApi from '@/api/content/article'
import mixin from "@/mixins/index"
export default {
  mixins:[mixin],
  data() {
    return {
      id:'',
      list:[],
      newInfo: {
        author: '',
        title: '',
        isShow: '0',
        summary: '',
        coverImg:'',
        editorType:0
      },
      loading:false,
      // 验证规则
      rules: {
        author: [{ required: true, message: '请输入作者', trigger: 'blur' }]
      }
    }
  },
  created(){
    this.id = this.$route.params.id
    
    if(this.id){
      articleApi.productArticle(this.id).then(res=>{
        console.log(res);
        this.newInfo =res.data.productArticle
      
      if(this.newInfo.editorType===0){
        setTimeout(()=>{
          this.$refs.Ti.setContent(this.newInfo.content1)
        },1000)
      }else{
        setTimeout(()=>{
          this.$refs.MD.setValue(this.newInfo.content1)
        },1000)
      }
     }) 
    }else{
      return
    }
    
    
  },
  components:{
    TEditor,
    MDEditor
  },
  methods: {
    submitForm(formName) {
      var content1 = ''
      if(this.newInfo.editorType===0){
        content1 = this.$refs.Ti.getContent()
      }else{
        content1 = this.$refs.MD.getValue()
      }
      var data = {
        ...this.newInfo,
        content1
      }
      
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.id){
            articleApi.updateArticle(data).then(res=>{
              if(res.success){
                this.$message.success("更新文章成功")
                this.$router.push({name:"Article"})
              }else{
                this.$message.error("更新文章失败")
              }
              this.loading = false
            })
          }else{
            articleApi.addArticle(data).then(res=>{
              if(res.success){
                this.$message.success("新建文章成功")
                this.$router.push({name:"Article"})
              }else{
                this.$message.error("新建文章失败")
              }
              this.loading = false
            })
          }
          
        } else {
          this.loading = false
          this.$message.warning("请按照要求填写")
        }
      })
    },
    //上传图片成功后的回调方法
    handleAvatarSuccess(res, file) {
      this.newInfo.coverImg = res.data.fileUrl
      this.$refs.uploadPic.clearFiles()
    },
    //富文本上传图片成功后的回调方法
    handleTinymceSuccess(res, file){
      //清除上传图片后文件名的显示
      this.$refs.uploadTiny.clearFiles()
      this.$refs.Ti.imageSuccessCBK(res.data.fileUrl)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/myScss';
</style>

